<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<input id="files" type="file" onchange="previewImage(this, 'prvid')" multiple="multiple">

		<div id="prvid">预览容器</div>
	</head>

	<body>
		<script type="text/javascript">
			function previewImage(file, prvid) {
				/* file：file控件 
				 * prvid: 图片预览容器 
				 */
				var tip = "Expect jpg or png or gif!"; // 设定提示信息 
				var filters = {
					"jpeg": "/9j/4",
					"gif": "R0lGOD",
					"png": "iVBORw"
				}
				var prvbox = document.getElementById(prvid);
				prvbox.innerHTML = "";
				if(window.FileReader) { // html5方案 
					for(var i = 0, f; f = file.files[i]; i++) {
						var fr = new FileReader();
						fr.onload = function(e) {
							var src = e.target.result;
							if(!validateImg(src)) {
								alert(tip)
							} else {
								showPrvImg(src);
							}
						}
						fr.readAsDataURL(f);
					}
				} else { // 降级处理

					if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
						alert(tip);
					} else {
						showPrvImg(file.value);
					}
				}

				function validateImg(data) {
					var pos = data.indexOf(",") + 1;
					for(var e in filters) {
						if(data.indexOf(filters[e]) === pos) {
							return e;
						}
					}
					return null;
				}

				function showPrvImg(src) {
					var img = document.createElement("img");
					img.src = src;
					prvbox.appendChild(img);
				}
			}
		</script>
	</body>

</html>